<template>
	<view class="toolbox-page">		
		<!-- 内容区域 -->
		<view class="content">
			<!-- 文案类目选择 -->
			<view class="section">
				<view class="section-title">请选择文案类目</view>
				<view class="category-grid">
					<view 
						v-for="(category, index) in categories" 
						:key="index"
						:class="['category-item', activeCategory === index ? 'active' : '']"
						@click="selectCategory(index)"
					>
						<image class="category-icon" :src="category.icon" mode="aspectFit"></image>
						<text class="category-name">{{category.name}}</text>
					</view>
				</view>
			</view>
			
			<!-- 商品输入 -->
				<view class="section-title">商品卖点</view>
				<view class="input-box">
					<u-input
						v-model="productFeature"
						type="textarea"
						height="120"
						:clearable="true"
						placeholder="请输入商品卖点"
						:maxlength="60"
						@input="onInputChange"
					/>
					<view class="word-count">{{wordCount}}/60</view>
				</view>
			</view>
			<!-- 快捷标签 -->
			<view class="tags-section">
				<view class="tags-title">快捷输入</view>
				<view class="tags-container">
					<view 
						v-for="(tag, index) in quickTags" 
						:key="index"class="tag"
						@click="addTag(tag)"
					>
						{{tag}}
					</view>
				</view>
			</view>
			
			<!-- 生成文案区域 -->
			<view class="section">
				<view class="section-title">生成文案</view>
				<view class="input-box">
					<u-input
						v-model="generatedCopy"
						type="textarea"
						height="200"
						:clearable="true"
						placeholder="生成文案将显示在这里"
						:disabled="true"
					/>
				</view>
				
				<!-- 底部按钮 -->
				<view class="action-buttons">
					<view class="btn copy" @click="copyText">复制文案</view>
					<view class="btn generate-btn" @click="generateCopy">生成文案</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前选中的类目
				activeCategory: 0,
				// 文案类目
				categories: [
					{ name: '小红书', icon: '/static/images/toolbox/xiaohongshu.png' },
					{ name: '微信', icon: '/static/images/toolbox/wechat.png' },
					{ name: '微博文案', icon: '/static/images/toolbox/weibo.png' },
					{ name: '群发文案', icon: '/static/images/toolbox/group.png' }
],
				// 商品卖点
				productFeature: '',
				// 字数统计
				wordCount: 0,
				// 快捷标签
				quickTags: ['当天发货', '正品保障', '七天退换', '包邮'],
				// 生成的文案
				generatedCopy: ''
			};
		},
		methods: {
			// 选择文案类目
			selectCategory(index) {
				this.activeCategory = index;
			},
			
			// 输入变化监听
			onInputChange(value) {
				this.wordCount = value ? value.length : 0;
			},
			
			// 添加标签到输入框
			addTag(tag) {
				if (this.productFeature.length + tag.length <= 60) {
					this.productFeature += (this.productFeature ? ' ' : '') + tag;
					this.wordCount = this.productFeature.length;
				} else {
					this.$tips.showToast('已超过最大字数限制');
				}
			},
			
			// 复制文案
			copyText() {
				if (!this.generatedCopy) {
					this.$tips.showToast('请先生成文案');
					return;
				}
				
				uni.setClipboardData({
					data: this.generatedCopy,
					success: () => {
						this.$tips.showToast('复制成功');
					}
				});
			},
			
			// 生成文案
			generateCopy() {
				if (!this.productFeature) {
					this.$tips.showToast('请输入商品卖点');
					return;
				}
				
				this.$tips.showLoading('生成中...');
				
				// 模拟生成文案的API调用
				setTimeout(() => {
					this.$tips.hideLoading();
					
					// 模拟生成的文案内容
					const templates = {
						0: `【小红书风格文案】\n✨ ${this.productFeature} ✨\n\n超值好物不容错过！\n点击链接立即购买！`,
						1: `【微信风格文案】\n${this.productFeature}\n\n感兴趣的朋友欢迎咨询～`,
						2: `【微博风格文案】\n#好物推荐# ${this.productFeature} \n转发抽送同款！`,
						3: `【群发文案】\n亲爱的客户，我们新到：${this.productFeature}，欢迎咨询购买！`
					};
					
					this.generatedCopy = templates[this.activeCategory] || '请选择文案类目并输入商品卖点';
					this.$tips.showToast('生成成功');
				}, 1500);
			}
		}
	};
</script>

<style lang="less" scoped>
	.toolbox-page {
		min-height: 100vh;
		background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
		padding-bottom: 40rpx;
		
		.header {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #ffffff;
			position: sticky;
			top: 0;
			z-index: 10;
			border-bottom: 1rpx solid #f0f0f0;
			
			.title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
			}
		}
		
		.content {
			padding: 0 32rpx;
		}
		
		.section {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 32rpx;
			margin-top: 32rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
			
			.section-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				margin-bottom: 24rpx;
			}
			
			.category-grid {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 20rpx;
				
				.category-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 24rpx 0;
					border-radius: 16rpx;
					background: #f8f9fa;
					transition: all 0.3s;
					
					&.active {
						background: #e6f7ff;
						border: 2rpx solid #1890ff;
						
						.category-name {
							color: #1890ff;
							font-weight: 600;
						}
					}
					
					.category-icon {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 16rpx;
					}
					
					.category-name {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
			
			.input-box {
				position: relative;
				background: #f8f9fa;
				border-radius: 12rpx;
				padding: 20rpx;
				
				.word-count {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}
			
			.tags-section {
				margin-top: 32rpx;
				
				.tags-title {
					font-size: 28rpx;
					color: #666666;
					margin-bottom: 20rpx;
				}
				
				.tags-container {
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;
					
					.tag {
						padding: 12rpx 24rpx;
						background: #f0f2f5;
						border-radius: 40rpx;
						font-size: 26rpx;
						color: #333333;
						
						&:active {
							background: #e6f7ff;
							color: #1890ff;
						}
					}
				}
			}
			
			.action-buttons {
				display: flex;
				gap: 20rpx;
				margin-top: 32rpx;
				
				.btn {
					flex: 1;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 40rpx;
					font-size: 32rpx;
					font-weight: 500;
				}
				
				.copy-btn {
					background: #ffffff;
					border: 2rpx solid #d9d9d9;
					color: #333333;
				}
				
				.generate-btn {
					background: #1890ff;
					color: #ffffff;
					
					&:active {
						background: #40a9ff;
					}
				}
			}
		}
	}
</style>